import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-09-10 15:18:45
-->
<route lang="json5" type="login">
{
  style: {
    navigationBarTitleText: '消息',
  },
}
</route>
<template>
  <view
    class="w-screen min-h-100vh pos-relative flex flex-col bg-#F4F5F9 p-20px pb-80rpx box-border"
    :style="{ 'justify-content': messageList.length <= 0 ? 'center' : 'start' }"
  >
    <view class="h-100% overflow-auto messageList" v-if="messageList.length > 0">
      <view
        class="bg-#fff border-rd-20rpx pos-relative mb-20rpx box-border overflow-hidden"
        v-for="(item, index) in messageList"
        :key="index"
        @click="skipElectronicDelivery(item.id, item.messageTitle, item.event)"
      >
        <view class="flex px-30rpx pb-20rpx pt-40rpx justify-start items-center">
          <view class="mr-30rpx">
            <img class="w-80rpx h-80rpx" src="../../static/images/icon.png" />
          </view>
          <view class="flex flex-col gap-14rpx">
            <text class="font-600">
              {{ item.messageTitle }}
            </text>
            <text class="text-26rpx">{{ item.messageContent }}</text>
          </view>
          <view class="top-10rpx pos-absolute right-20rpx flex gap-10rpx">
            <text class="text-26rpx">{{ formatTime(item.createTime, 'yyyy-MM-dd HH:mm:ss') }}</text>
            <view v-if="!item.status" class="w-15rpx h-15rpx border-rd-50% bg-red mt-6rpx"></view>
          </view>
        </view>
      </view>
      <wd-loadmore v-if="messageList.length > 0" :state="state" @reload="loadmore" />
    </view>

    <view v-if="messageList.length <= 0" class="111">
      <wd-status-tip image="message" tip="暂无消息" />
    </view>

    <view
      class="bottom-0 left-0 pos-fixed px-40rpx py-20rpx w-full flex box-border justify-end items-center bg-#fff"
    >
      <image
        @click="handleDelete"
        class="w-200rpx h-60rpx"
        src="../../static/images/close.png"
      ></image>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getMessageAPI, upmMessageAPI, deleteMessageAPI } from '@/service/index/foo'
import { formatTime } from '@/utils/index'
import { useUserStore } from '@/store'
const max = ref<number>(60)
const state = ref<string>('loading')
const userStore = useUserStore()
const { safeAreaInsets } = uni.getSystemInfoSync()
const pages = reactive({
  pageNo: 1,
  pageSize: 10,
  acceptPhone: userStore.userInfo.phone,
})
const messageList = ref([])
onShow(() => {
  messageList.value = []
  pages.pageNo = 1
  max.value = 60
  gteList()
})
onReachBottom(() => {
  console.log('触底')
  if (messageList.value.length === max.value) {
    state.value = 'finished'
  } else if (messageList.value.length < max.value) {
    pages.pageNo += 1
    loadmore()
  }
})
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    gteList()
  }, 1000)
}
function gteList() {
  getMessageAPI({ ...pages }).then((res) => {
    messageList.value.push(...res.data.list)
    max.value = res.data.total
    messageList.value.length == max.value ? (state.value = 'finished') : (state.value = 'loading')
  })
}
function skipElectronicDelivery(id, messageTitle, event) {
  upmMessageAPI({ id, status: true }).then((res) => {
    if (event == '案件查询' || event == '公益诉讼' || event == '羁押审查' || event == '信访服务') {
      return uni.navigateTo({
        url: `/pages/mine/shenhe`,
      })
    }
    if (messageTitle === '电子送达签收通知' || messageTitle === '电子送达通知') {
      return uni.navigateTo({
        url: `/pages/ElectronicDelivery/index`,
      })
    } else if (messageTitle === '预约接访通知' || messageTitle === '接访预约已批准') {
      return uni.navigateTo({
        url: `/pages/mine/videoInterview`,
      })
    } else if (messageTitle === '接访预约已被批准' || messageTitle === '接访预约已被驳回') {
      return uni.navigateTo({
        url: `/pages/mine/reservationService`,
      })
    }
  })
}
function handleDelete() {
  const ids = messageList.value.map((item) => item.id)
  if (ids.length > 0) {
    deleteMessageAPI({ id: ids }).then((res) => {
      gteList()
    })
  }
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  width: 100%;
}

.messageList::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}
</style>
